<template>
	<view class="container">
		<view class="search-input">
			<!-- <uni-icons type="search"></uni-icons> -->
			<uni-easyinput placeholder="请输入员工姓名" v-model="empName" trim="both" />
			<u-button  class="search-btn" @click="search" size="default" type="primary" :ripple="true">查询</u-button>
			
		</view>
		<unicloud-db ref="udb" v-slot:default="{data, pagination, loading, hasMore, error}" collection="uni-id-users" action="user" field="username,station,gender,avatar" :where="searchCondition">
			<view v-if="error">{{error.message}}</view>
			<view v-else-if="data">
				<uni-list>
					<uni-list-item 
						v-for="(item, index) in data" 
						:key="index" 
						showArrow 
						:title="item.username"
						:note="'性别：' + (item.gender===1?'男':(item.gender===2?'女':'未知')) + ' ' + (item.station?('岗位：'+item.station):'')"
						:clickable="true"
						@click="handleItemClick(item._id)">
						<template v-slot:header>
							<u-jk-avatar v-if="item.avatar" :src="item.avatar" size="80" mode="square" class="header-image"></u-jk-avatar>
							<u-jk-avatar v-else :text="item.username" size="80" mode="square" class="header-image" bg-color='#36daeb'></u-jk-avatar>
						</template>
					</uni-list-item>
				</uni-list>
			</view>
			<uni-load-more :status="loading?'loading':(hasMore ? 'more' : 'noMore')"></uni-load-more>
		</unicloud-db>
		<view class="holiday-btn" type="default" @click="fabClick"><u-icon size="70" name="plus"></u-icon></view>
		<!-- <uni-fab ref="fab" horizontal="right" vertical="bottom" :pop-menu="false" @fabClick="fabClick" /> -->
		<u-tabbar :list="vuex_tabbar"  :icon-size="vuex_tabbar_icon_size" :active-color="vuex_tabbar_active_color"></u-tabbar>
	</view>
</template>

<script>
	const db = uniCloud.database();
	export default {
		data() {
			return {
				defaultAvatarUrl: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png',
				searchCondition: '',
				loadMore: {
					contentdown: '',
					contentrefresh: '',
					contentnomore: ''
				},
				empName: ''
			}
		},
		onPullDownRefresh() {
			this.refreshList();
		},
		onReachBottom() {
			this.$refs.udb.loadMore()
		},
		onShow() {
			// 刷新数据
			this.refreshList();
			
		},
		methods: {
			// 刷新列表数据
			refreshList() {
				this.$refs.udb.loadData({
					clear: true
				}, () => {
					uni.stopPullDownRefresh()
				})
			},
			
			search() {
				let _this = this;
				if(_this.empName) {
					_this.searchCondition = `/${_this.empName}/.test(username)`;
				} else {
					_this.searchCondition = '';
				}
				_this.$nextTick(() => {
					_this.refreshList();
				})
			},
			handleItemClick(id) {
				uni.navigateTo({
					url: './detail?id=' + id
				})
			},
			fabClick() {
				let _this = this;
				// 打开新增页面
				uni.navigateTo({
					url: './add',
					events: {
						// 监听新增数据成功后, 刷新当前页面数据
						refreshData: () => {
							_this.refreshList();
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.header-image {
		width: 80rpx;
		height: 80rpx;
		margin-right: 10px;
		overflow: hidden;
	}
	.search-input {
		display: flex;
		align-items: center;
		margin: 20px;

		.search-btn {
			margin-left: 20px;
		}
	}
	.holiday-btn {
		height: 120rpx;
		width: 120rpx;
		position: fixed;
		right: 20rpx;
		bottom: calc(var(--window-bottom) + 160rpx) ;
		background-color: #fff;
		z-index: 1000000;
		padding: 24rpx;
		// padding-left: 26rpx;
		font-size: 15px;
		border-radius: 50%;
		border:1px solid #c1c1c1;
		line-height: inherit;
		box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
		text-align: center;
	}
</style>
